<template>
  <div class="msg-release">
    <TitleBar title="发布信息模板设置" refresh />
    <div class="query">
      <!--      <el-input-->
      <!--        v-model="query"-->
      <!--        placeholder="请输入你要查询的内容"-->
      <!--        prefix-icon="el-icon-search"-->
      <!--      />-->
      <!--      <div class="query-sure">查询</div>-->
    </div>
    <div class="publish-content">
      <h1>填写发布内容</h1>
      <div class="publish-form">
        <div>
          <el-form :inline="true" :rules="contentRules" :model="publishContent" class="demo-form-inline">
            <el-form-item label="发布内容摘要：" prop="abstract">
              <el-input v-model="publishContent.abstract" class="form-input" placeholder="输入内容摘要" :disabled="true" />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="butArray[0].abstractBut" class="form-button">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form :inline="true" :rules="contentRules" :model="publishContent" class="demo-form-inline">
            <el-form-item label="发布类型：" prop="abstract">
              <el-input v-model="publishContent.abstract" class="form-input" placeholder="选择需求、资源、服务三项中一项" :disabled="true" />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="butArray[1].typeBut" class="form-button">
                <el-radio-button  disabled label="1">启用</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form :inline="true" :rules="contentRules" :model="publishContent" class="demo-form-inline">
            <el-form-item label="发布行业：" prop="abstract">
              <el-input v-model="publishContent.abstract" class="form-input" placeholder="选择行业列表，关联后台行业分类" :disabled="true" />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="butArray[2].industryBut" class="form-button">
                <el-radio-button disabled label="1">启用</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form :inline="true" :rules="contentRules" :model="publishContent" class="demo-form-inline">
            <el-form-item label="发布地区：" prop="abstract">
              <el-input v-model="publishContent.abstract" class="form-input" placeholder="选择地区，关联后台地区分类" :disabled="true" />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="butArray[3].regionBut" class="form-button">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form :inline="true" :rules="contentRules" :model="publishContent" class="demo-form-inline">
            <el-form-item label="发布分类：" prop="abstract">
              <el-input v-model="publishContent.abstract" class="form-input" placeholder="选择行业分类，关联后台行业二级类目" :disabled="true" />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="butArray[4].classificationBut" class="form-button">
                <el-radio-button disabled label="1">启用</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form :inline="true" :rules="contentRules" :model="publishContent" class="demo-form-inline">
            <el-form-item label="发布内容：" prop="abstract">
              <el-input v-model="publishContent.desc" type="textarea" placeholder="输入发布内容，字数不超过150字" resize="none" :disabled="true" />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="butArray[5].contentBut" class="form-button">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="publish-content" style="margin-top: 32px">
      <h1>填写基本资料</h1>
      <div class="publish-form">
        <div>
          <el-form :inline="true" :rules="contentRules" :model="publishContent" class="demo-form-inline">
            <el-form-item label="用户类型：" prop="abstract">
              <el-input v-model="publishContent.abstract" class="form-input" placeholder="选择个人\企业" :disabled="true" />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="butArray[6].userType" class="form-button">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form :inline="true" :model="publishContent" class="demo-form-inline">
            <el-form-item label="身份信息：" prop="abstract" class="identity">
              <el-input v-model="publishContent.abstract" class="form-input" placeholder="填写身份证号码" :disabled="true" />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="butArray[7].identityNews" class="form-button">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="publish-content" style="margin-top: 32px">
      <h1>填写个人资料</h1>
      <div class="publish-form">
        <div>
          <el-form :inline="true" :rules="contentRules" :model="publishContent" class="demo-form-inline">
            <el-form-item label="联系人姓名：" prop="abstract">
              <el-input v-model="publishContent.abstract" class="form-input" placeholder="请输入联系人姓名" :disabled="true" />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="butArray[8].contacts" class="form-button">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form :inline="true" :rules="contentRules" :model="publishContent" class="demo-form-inline">
            <el-form-item label="微信号：" prop="abstract">
              <el-input v-model="publishContent.abstract" class="form-input" placeholder="请输入微信号码" :disabled="true" />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="butArray[9].weChat" class="form-button">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form :inline="true" :rules="contentRules" :model="publishContent" class="demo-form-inline">
            <el-form-item label="手机号码：" prop="abstract">
              <el-input v-model="publishContent.abstract" class="form-input" placeholder="请输入手机号码" :disabled="true" />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="butArray[10].phone" class="form-button">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form :inline="true" :rules="contentRules" :model="publishContent" class="demo-form-inline">
            <el-form-item label="电话号码：" prop="abstract">
              <el-input v-model="publishContent.abstract" class="form-input" placeholder="请输入电话号码" :disabled="true" />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="butArray[11].telePhone" class="form-button">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="preservation" @click="opSwitch">保存</div>
  </div>
</template>

<script>
import { templateDefaultSwitch, templateSwitch } from '@/api/operate.js'
export default {
  inject: ['reload'],
  data() {
    return {
      // 搜索框
      query: '',
      // 表单一
      publishContent: {
        abstract: '',
        desc: ''
      },
      // 表单验证规则
      contentRules: {
        abstract: [
          { required: true, message: '输入内容摘要' }
        ]
      },
      // 按钮开关情况
      butArray: [
        { abstractBut: 1 },
        { typeBut: 0 },
        { industryBut: 0 },
        { regionBut: 1 },
        { classificationBut: 0 },
        { contentBut: 1 },
        { userType: 1 },
        { identityNews: 1 },
        { contacts: 1 },
        { weChat: 1 },
        { phone: 1 },
        { telePhone: 1 }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      templateDefaultSwitch().then(res => {
        this.butArray[0].abstractBut = res.data.MessageAbstract
        this.butArray[1].typeBut = res.data.MessageType
        this.butArray[2].industryBut = res.data.Trade
        this.butArray[3].regionBut = res.data.Area
        this.butArray[4].classificationBut = res.data.ChidTrade
        this.butArray[5].contentBut = res.data.MessageContent
        this.butArray[6].userType = res.data.UserType
        this.butArray[7].identityNews = res.data.UserIdcard
        this.butArray[8].contacts = res.data.ConnectName
        this.butArray[9].weChat = res.data.Wechat
        this.butArray[10].phone = res.data.Phone
        this.butArray[11].telePhone = res.data.Tel
        console.log(res)
      })
    },
    opSwitch() {
      console.log(this.butArray[0].abstractBut)
      templateSwitch(
        { 'areaState': this.butArray[3].regionBut,
          'chidTradeState': this.butArray[4].classificationBut,
          'connectNameState': this.butArray[8].contacts,
          'messageAbstractState': this.butArray[0].abstractBut,
          'messageContentState': this.butArray[5].contentBut,
          'messageTypeState': this.butArray[1].typeBut,
          'phoneState': this.butArray[10].phone,
          'telState': this.butArray[11].telePhone,
          'tradeState': this.butArray[2].industryBut,
          'userIdcardState': this.butArray[7].identityNews,
          'userTypeState': this.butArray[6].userType,
          'wechatState': this.butArray[9].weChat,
          'id': 1
        }
      ).then(res => {
        this.getData()
        console.log(res)
        this.$message({
          message: '保存成功',
          center: true,
          type: 'success'
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .msg-release{
    font-family:PingFang-SC-Bold;
    width: 100%;
    /*height: 100%;*/
    /*overflow: auto;*/
    padding: 0 110px 64px 30px ;
    margin: 16px 0 64px 16px;
  }
  .title{
    width: 100%;
    height: 37px;
    display: flex;
    flex-flow: nowrap row;
    margin: 16px 0;
    justify-content: space-between;
  }
  .title-left{
    height: 37px;
    display: flex;
    align-items: center;
    float: left;
  }
  .title-left>div{
    width:11px;
    height:20px;
    display: inline-block;
    background:rgba(72,141,255,1);
    border-radius:4px;
  }
  .title-left>p{
    margin-left: 14px;
  }
  .query{
    margin-bottom: 32px;
    width:100%;
    display: flex;
    align-items: center;
  }
  .query-sure{
    width:106px;
    height:40px;
    background:rgba(72,141,255,1);
    margin-left: 30px;
    line-height: 40px;
    font-size:16px;
    font-weight:500;
    color:rgba(255,255,255,1);
    text-align: center;
  }
  .publish-content{
    width:100%;
    height: 100%;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius:4px;
  }
  .publish-content>h1{
    font-size:16px;
    font-weight:bold;
    color:rgba(51,51,51,1);
    padding: 26px 0;
    margin-left: 24px;
    border-bottom: 1px solid rgba(241,241,241,1);
  }
  .publish-form{
    padding: 0 0 53px 24px;
    display: flex;
    flex-direction: column;
    align-content: space-between;
  }
  .publish-form>div{
    padding-left: 90px;
    width: 100%;
    margin-top: 20px;
  }
  .preservation{
    width:160px;
    height:40px;
    margin: 30px auto 0;
    background:rgba(72,141,255,1);
    border-radius:4px;
    font-size:16px;
    text-align: center;
    line-height: 40px;
    font-weight:500;
    color:rgba(255,255,255,1);
    cursor: pointer;
  }
</style>

